import React from 'react'
import { Button } from 'antd-mobile'
import { connect } from 'react-redux'
import { addgun, delayAdd, delgun } from '../index.redux'

// 用状态组件（容器组件）
// export default class Gun extends Component{
//   constructor(props) {
//     super(props)
//   }
//   render() {
//     const { store, addgun, delgun, nowgun } = this.props
//     const dispatch = store.dispatch
//     return (
//       <div>
//         <h1>{`nowgun ${nowgun}`}</h1>
//         <Button onClick={() => dispatch(addgun())}>add gun</Button>
//         <Button onClick={() => dispatch(delgun())}>del gun</Button>
//       </div>
//     )
//   }
// }

// 无状态组价（木偶组件）
function Gun(props) {
  const { addgun, delgun, delayAdd, num } = props
  return (
    <div>
      <h1>{`nowgun ${num}`}</h1>
      <Button onClick={ addgun }>add gun</Button>
      <Button onClick={ delgun }>del gun</Button>
      <Button onClick={ delayAdd }>delayAdd gun</Button>
    </div>
  ) 
}

// 不可能把整个state给到这个组件的props， 所以将要用到的state给塞到组件props的num (你要什么属性放到props里面)
const mapStatetoProps = state => {
  return { num: state.counter }
}

// 将要用到的actionCreator都给塞到组件的props里面 (你要什么方法放到props里面，会自动dispatch)
const actionCreators = { addgun, delayAdd, delgun }

// 通过react-redux的connect高阶函数将actionCreator与某些state与组件的props进行链接
export default connect(mapStatetoProps, actionCreators)(Gun)